<template>
  <template v-if="url">
    <Image
      :src="url as string"
      :preview="{ visible: false }"
      :style="style"
      @click="visible = true"
    />
    <div style="display: none">
      <ImagePreviewGroup
        :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }"
      >
        <Image v-for="url in urls" :src="url" :key="url" />
      </ImagePreviewGroup>
    </div>
  </template>
</template>

<script setup lang="tsx">
import { CSSProperties, computed, ref } from 'vue';
import { Image, ImagePreviewGroup } from 'ant-design-vue';

const {
  urls = [],
  width = 20,
  height = 20,
} = defineProps<{
  urls?: string[];
  width: number;
  height: number;
}>();

const url = computed<string | boolean>(() => urls[0] || false);

const style = computed<CSSProperties>(() => {
  return {
    width: `${width}px`,
    height: `${height}px`,
  };
});

const visible = ref(false);
</script>
